<template>
    <div class="my-applications-container">
        <el-form :model="getAppInfoListParm" class="search-form" inline>
            <el-form-item label="应用名称">
                <el-input v-model="getAppInfoListParm.clientName" placeholder="请输入应用名称" clearable @keyup.enter="fetchApplications" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select style="width: 100px;" v-model="getAppInfoListParm.status" placeholder="请选择状态" @change="fetchApplications">
                    <el-option label="全部" :value="null" />
                    <el-option label="等待审核" :value="1" />
                    <el-option label="审核通过" :value="2" />
                    <el-option label="审核未通过" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchApplications">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData?.items" style="width: 100%" border stripe v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" show-overflow-tooltip />
            <el-table-column prop="clientName" label="应用名称" min-width="120" show-overflow-tooltip />
            <el-table-column prop="scopes" label="授权权限" min-width="180" show-overflow-tooltip />
            <el-table-column prop="clientLogo" label="应用Logo" width="100">
                <template #default="{ row }">
                    <el-image v-if="row.clientLogo" :src="address.minioUrl + 'image/' + row.clientLogo"
                        :preview-src-list="[address.minioUrl + 'image/' + row.clientLogo]" fit="cover"
                        class="client-logo" />
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column prop="clientHostname" label="应用域名" min-width="150" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                    <el-tag :type="getStatusType(row.status)">
                        {{ getStatusText(row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="failReason" label="失败原因" min-width="150" show-overflow-tooltip />
            <el-table-column prop="createTime" label="申请时间" width="180">
                <template #default="{ row }">
                    {{ formatDate(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="180">
                <template #default="{ row }">
                    {{ formatDate(row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="updateUser" label="上次更新员id" min-width="150" show-overflow-tooltip />
        </el-table>

        <div class="pagination-container">
            <el-pagination layout="prev, pager, next" v-model:current-page="getAppInfoListParm.pageNo" :page-count="Number.parseInt(tableData?.page ?? '0')" @update:current-page="fetchApplications()" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/base/request'
import AppInfo from '@/types/auth/AppInfo'
import { address } from '@/base/address'
import GetAppInfoList from '@/types/auth/GetAppInfoList'
import Page from '@/base/page'

const getAppInfoListParm = ref<GetAppInfoList>({
    pageNo: 1,
    pageSize: 10,
})

const tableData = ref<Page<AppInfo>>()

const loading = ref(false)

// 获取申请记录
const fetchApplications = async () => {
    loading.value = true
    try {
        const response = await request.post('/user/authClient/getMyApplications', getAppInfoListParm.value)
        if (response.data.code === 200) {
            tableData.value = response.data.data
        } else {
            ElMessage.error(response.data.msg)
        }
    } catch (error) {
        ElMessage.error('获取申请记录失败')
    } finally {
        loading.value = false
    }
}

// 获取状态类型
const getStatusType = (status: number) => {
    switch (status) {
        case 1:
            return 'warning'
        case 2:
            return 'success'
        case 3:
            return 'danger'
        default:
            return 'info'
    }
}

// 获取状态文本
const getStatusText = (status: number) => {
    switch (status) {
        case 1:
            return '等待审核'
        case 2:
            return '审核通过'
        case 3:
            return '审核未通过'
        default:
            return '未知状态'
    }
}

// 格式化日期
const formatDate = (date: Date | string | undefined) => {
    if (!date) return '-'
    return new Date(date).toLocaleString()
}

// 重置搜索条件
const resetSearch = () => {
    getAppInfoListParm.value = {
        pageNo: 1,
        pageSize: 10,
        clientName: '',
        status: undefined
    }
    fetchApplications()
}

onMounted(() => {
    fetchApplications()
})
</script>

<style scoped>
.my-applications-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.search-form {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-form :deep(.el-form-item) {
    margin-bottom: 0;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-header h2 {
    margin: 0;
    font-size: 20px;
}

.client-logo {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>